<template>
  <div>
    <el-row>
        <el-col :span="9">
          <div class="grid-content bg-purple-dark">

              <el-form :model="userData">
                <el-form-item label="姓名" >
                  <h2>{{userData.userName}}</h2>
                </el-form-item>
                <el-form-item label="职务" >
                  <h3>{{userData.jobs.jobName}}</h3>
                </el-form-item>
                <el-form-item label="电话" >
                  <h3>{{userData.phone}}</h3>
                </el-form-item>
                <el-form-item label="账号" >
                  <h3>{{userData.account}}</h3>
                </el-form-item>
                <el-form-item label="密码" >
                  <h3>******</h3>
                </el-form-item>
              </el-form>
                  <el-button type="success" size="mini"  @click="ChangeUser">修改信息</el-button>
          </div>
        </el-col>
    </el-row>

    <el-dialog title="修改个人信息" :visible.sync="dialogChangeUserM" :modal="false">
      <el-form  label-width="80px" >

        <el-form-item label="姓名">
          <el-input placeholder="请输入姓名" v-model="user.userName">{{ user.userName }}</el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input  placeholder="请输入电话号码" v-model="user.phone">{{ user.phone }}</el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input  placeholder="请输入账号" v-model="user.account">{{ user.account }}</el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" placeholder="请输入密码" v-model="user.password">{{ user.password }}</el-input>
        </el-form-item>

      </el-form>

      <div slot="footer">
        <el-button @click="dialogChangeUserM = false">取 消</el-button>
        <el-button type="primary" @click="updateUsers()">确 定</el-button>
      </div>
    </el-dialog>
  </div>




</template>

<script>
export default {
  data(){
    return{
      userData:'',
      dialogChangeUserM:false,
      user:{userName:'',phone:'',account:'',password:''}

    }
  },
  methods:{
    queryUser(){
      let jwt = localStorage.getItem("jwt");
      let account  = sessionStorage.getItem("account");
      this.$axios.get('api/users/queryUserByAccountMy?account='+account,
          {headers:{"jwt":jwt}})
          .then(response=>{
            console.log(response.data.data)
            if(response.data.code == 200 ){
              this.userData = response.data.data


            }else{

            }
          })
    },

    ChangeUser(){
      this.dialogChangeUserM = true;
      this.user.userName = this.userData.userName;
      this.user.phone = this.userData.phone;
      this.user.account = this.userData.account;
      this.user.password = this.userData.password;


    },
    updateUsers(){
      let jwt = localStorage.getItem("jwt");
      this.$axios.post('api/users/updateUserByAccountMy',this.user,{headers:{'jwt':jwt}})
          .then(response=>{
            console.log(response.data)
            this.dialogChangeUserM = false;
            this.queryUser();
            this.$message({
              message: '修改成功',
              type: 'success'
            });
          })
    }
  },
  created() {
     this.queryUser();
  }
}
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;

}
.el-col {

}
.el-form{
  text-align: center;
}
</style>